iPad SDK : Implementing an About Panel in a Modal Way (part 1) - Creating the Modal Web View Controller

We'll present a UIWebView with information about Dudel and links at the bottom to get additional information. This web view will be presented modally, just like the file-renaming view.

As you may know, the Dudel application created during the writing of this book is actually available on the App Store as a free download. This is partly because while creating it, we found it was fun to use and worthy of making available to others. But we also figured that it could be a good way to promote the book itself!

The shipping version of Dudel includes an info screen that describes this book, tells the users that they can buy this book if they want to see how the app was made, and provides links to the Apress and Amazon web sites. In order to keep our promise to include full details on how to make this app, we're going to make the same info screen that could lead you to buying this book—if you didn't already have a copy, which you do. How self-referential is this?

1. Creating the Modal Web View Controller

Start by creating a new UIViewController class called ModalWebViewController, again with an .xib file and without being a subclass of UITableViewController. Give it the following interface declaration in ModalWebViewController.h:

//  ModalWebViewController.h
#import <UIKit/UIKit.h>
@protocol ModalWebViewControllerDelegate;
@interface ModalWebViewController : UIViewController {
  id <ModalWebViewControllerDelegate> delegate;
  UIWebView *webView;
}
@property (nonatomic, assign) id <ModalWebViewControllerDelegate> delegate;
@property (nonatomic, retain) IBOutlet UIWebView *webView;
- (IBAction)done;
- (IBAction)apressSite;
- (IBAction)amazonSite;

@end
@protocol ModalWebViewControllerDelegate
- (void)modalWebViewControllerDidFinish:(ModalWebViewController *)controller;
@end

					  

Now open ModalWebViewController.xib in Interface Builder, and once again use the attribute inspector to disable the view's status bar. Then use the size inspector to set the view's size to 540 by 620. Use the Library to find a UIToolbar and put it at the bottom of the view, and then add a UIWebView to fill up the rest of the view. Now put five UIBarButtonItems into the toolbar. Use the attribute inspector to set the fourth button's identifier to Flexible Space, and the fifth item's identifier to Done. Then set the titles on the remaining three to More Info, Buy the eBook, and Buy the Print Book, respectively, as shown in Figure 1.

Figure 1. The toolbar for our ModalWebViewController

Control-drag to connect each of the four clickable buttons to the appropriate action methods in File's Owner: apressSite, apressSite, amazonSite, and done. (Yes, we're reusing the same method for both the More Info and Buy the eBook actions.)

Now control-drag from the File's Owner icon to the UIWebView, and connect the webView outlet. The GUI is complete. Save your work and switch back to Xcode to finish up this class. Here's the code for ModalWebViewController.m:

//  ModalWebViewController.m
#import "ModalWebViewController.h"
@implementation ModalWebViewController
@synthesize delegate;
@synthesize webView;
- (void)viewDidLoad {
  // Load the bookInfo.html file into the UIWebView.
  NSString *path = [[NSBundle mainBundle] pathForResource:@"bookInfo" ofType:@"html"];
  NSURL *url = [NSURL fileURLWithPath:path];
  NSURLRequest *request = [NSURLRequest requestWithURL:url];
  [self.webView loadRequest:request];
  [super viewDidLoad];
}
- (IBAction)done {
  // The Done button was tapped, so close Modal Web View.
  [self.delegate modalWebViewControllerDidFinish:self];
}
- (IBAction)apressSite {
  // Go to the Apress.com book web page in Mobile Safari.
  NSURL *url = [NSURL URLWithString:@"http://www.apress.com/book/view/9781430230212"];
  [[UIApplication sharedApplication] openURL:url];
}
- (IBAction)amazonSite {
  // Go to the Amazon.com book web page in Mobile Safari.
  NSURL *url = [NSURL URLWithString:@"http://www.amazon.com/dp/1430230215/"];
  [[UIApplication sharedApplication] openURL:url];
}
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)orientation {
  // Overridden to allow any orientation.
  return YES;
}
- (void)dealloc {
  [webView release];
  [super dealloc];
}
@end